<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div @click="handerClick">点我{{ a }}</div>
        <div @click="destroydown">点击销毁下列组件</div>
        <demo-text v-if="status"></demo-text>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('demo-text',{
            template:'<div>我是子组件</div>',
            data(){
                return {
                   a:1
                }
            },
            beforeDestroy:function(){
                console.log('销毁前') //beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
                console.log(document.getElementById('app').innerHTML)
            },
            destroyed:function(){
                console.log('销毁完成') //destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
                console.log(document.getElementById('app').innerHTML)
            }
        })
        const app = new Vue({
            el:'#app',
            data:{
                a:1,
                status:true
            },
            methods:{
               handerClick(){
                   this.a = "你好"
               },
               destroydown(){
                   this.status = false
               },
            },
            beforeCreate:function(){
                console.log('---------beforeCreate创建前的状态-----------')
                console.log(this.$el) //dom还没有开始挂载
                console.log(this.a) //new Vue 后data还未更新
            },
            created:function(){
                console.log('---------created创建后---------------')
                console.log(this.$el)
                console.log(this.a)
            },
            beforeMount:function(){
                console.log('---------beforeMount挂载前的状态--------');
                console.log(this.$el);
                console.log(this.a)
            },
            mounted:function(){
                console.log('---------mounted挂载后的状态--------');
                console.log(this.$el)
                console.log(this.a)
            },
            beforeUpdate:function(){
                console.log('---------beforeUpdata节点更新前-------');
                console.log(document.getElementById('app').innerHTML)
            },
            updated:function(){
                console.log('--------updated更新后--------')
                console.log(document.getElementById('app').innerHTML)
            },
            beforeDestroy:function(){
                console.log('-------beforeDestroy销毁前-------');
                console.log(this.$el)
                console.log(this.$data)
            },
            destroy:function(){
                console.log('------destory组件销毁后-------')
                console.log(this.$el)
                console.log(this.$data)
            }
            

        })
    
    
    
    </script>
</body>
</html>